<template>
  <div>
    <div class="n-layout-page-header">
      <n-card :bordered="false" title="表格选择器">
        选择器增强，用于展示多列数据表格选择器，可实现单选/多选，还能配置表单查询，项目实测，还是挺实用的
      </n-card>
    </div>
    <n-card :bordered="false" class="mt-3 proCard">
      <n-alert title="单选" type="info"> 始终只能选择一个，切换分页也是如此 </n-alert>
      <div class="mt-3">
        <n-space align="center">
          <TableSelect
            ref="TableSelectRef"
            labelField="name"
            valueField="id"
            placeholder="请选择内容（单选）"
            v-model:value="tableSelectData"
            :tableProps="{
              rowKey: (row) => row.id,
              request: loadDataTable,
              columns: columns,
            }"
            @change="tableSelectChange"
          />
        </n-space>
      </div>
    </n-card>

    <n-card :bordered="false" class="mt-3 proCard">
      <n-alert title="多选" type="info" class="mt-3">
        支持选择多个，切换分页也不影响，试试吧
      </n-alert>
      <div class="mt-3">
        <n-space align="center">
          <TableSelect
            ref="TableSelectRef"
            labelField="name"
            valueField="id"
            placeholder="请选择内容（多选）"
            :multiple="true"
            :tableProps="{
              rowKey: (row) => row.id,
              request: loadDataTable,
              columns: columns,
            }"
            @change="tableSelectChange"
          />
        </n-space>
      </div>
    </n-card>

    <n-card :bordered="false" class="mt-3 proCard">
      <n-alert title="多选" type="info">
        支持配置表单，搜索查询，适用于，查询数据较多，支持分页多选
      </n-alert>
      <div class="mt-3">
        <n-space align="center">
          <TableSelect
            ref="TableSelectRef"
            labelField="name"
            valueField="id"
            placeholder="请选择内容（多选）"
            v-model:formValues="formValues"
            :multiple="true"
            :formProps="formPropsOption"
            :tableProps="{
              rowKey: (row) => row.id,
              request: loadDataTable,
              columns: columns,
              pagination: {
                simple: true,
              },
            }"
            @change="tableSelectChange"
          />
        </n-space>
      </div>
    </n-card>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { TableSelect } from '@/components/TableSelect';
  import { getTableList } from '@/api/table/list';
  import { columns } from './basicColumns';
  import { FormSchema } from '@/components/Form/index';

  const tableSelectData = ref(['啊俊']);
  const formValues = ref();

  const schemas: FormSchema[] = [
    {
      field: 'name',
      labelMessage: '可以通过名称搜索查询哦',
      component: 'NInput',
      label: '名称',
      componentProps: {
        placeholder: '请输入名称',
        onInput: (e: any) => {
          console.log(e);
        },
      },
      // rules: [{ required: true, message: '请输入名称', trigger: ['blur'] }],
    },
  ];

  const formPropsOption = {
    gridProps: { cols: '2' },
    labelWidth: 80,
    submitButtonText: '查询',
    showAdvancedButton: false,
    schemas,
  };

  const loadDataTable = async (res) => {
    return await getTableList({ ...formValues.value, ...res });
  };

  function tableSelectChange(list) {
    console.log('list', list);
  }
</script>

<style lang="less" scoped></style>
